<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title>电视剧详情列表</title>
    <style>
        body,ul,p,h2,h3 {
            margin: 0;
            padding: 0;
        }
        img {
            border: none;
        }
        li {
            list-style: none;
        }
        a {
            color: #666666;
            text-decoration: none;
        }
        a:hover {
            text-decoration: underline;
        }
        #main {
            width: 328px;
            margin: 10px auto;
        }
        #title h2 {
            border: 1px #e0e0e8 solid;
            font-size: 12px;
            height: 27px;
            line-height: 27px;
            padding-left: 38px;
            background: url(../image/1.gif) no-repeat 11px 7px;
        }
        #top {
            margin: 14px 0 0 0;
        }
        #pic {
            float: left;
        }
        #pic a img {
            border: 1px solid #e0e0e8;
            padding: 2px;
            background: #FFFFFF;
        }
        #text {
            float: right;
            width: 198px;
        }
        #text h2 {
            font-size: 12px;
        }
        #text h2 a {
            color: #000000;
        }
        #text h3 {
            font-size: 12px;
            color: #666;
            font-weight: normal;
            word-spacing: 6px;
        }
        #text h3 span {
            color: #666666;
        }
        #text p {
            font-size: 12px;
            color: #666666;
            line-height: 22px;
        }
        #text .m {
            margin: 4px 0 0 0;
        }
        #text .d {
            margin: 14px 0 14px 0;
        }
        ul {
            margin: 20px 0 0 0;
        }
        ul li {
            font-size: 12px;
            line-height: 30px;
        }
        ul li span {
            color: #888888;
            float: right;
        }
        ul li a {
            float: left;
        }
        ul li {
            margin: 11px 0 0 0;
        }
    </style>
</head>

<body>
    <div id="main">
        <div id="title">
            <h2>明星荐片</h2>
        </div>
        <div id="top">
            <div id="pic">
                <a href="#"><img src="image/3.gif" /></a>
            </div>
            <div id="text">
                <h2 class="d"><a href="#">周秀娜荐片:让子弹飞</a></h2>
                <p class="m"><span>导演：</span>姜文</p>
                <p class="m"><span>主演：</span>姜文 周润发 葛优</p>
                <p class="m">点评：我最喜欢的要算《让子弹飞》了,超喜欢...<a href="#">[详情]</a></p>
            </div>
        </div>
        <ul type="square">
            <li><a href="#">《巴别塔》：好的故事引人深思</a><span>阿朵</span></li>
            <li><a href="#">《洛杉矶之战》：外星人那么弱智？</a><span>丁子俊</span></li>
            <li><a href="#">《让子弹飞》：武侠里也可以有爱情</a><span>周秀娜</span></li>
            <li><a href="#">《剑雨》：好的故事引人深思</a><span>叶年生</span></li>
            <li><a href="#">《春风沉醉的夜晚》：非常真实</a><span>如小果</span></li>
            <li><a href="#">《克洛伊》：故事简单却细致</a><span>刘若英</span></li>
        </ul>
    </div>

</body>

</html>